<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <div style="text-align: center;font-size: 20px;margin-bottom: 30px;font-weight: 600;">查看笔记</div>
    <el-form
      :model="dataForm"
      ref="dataForm"
      label-width="150px"
    >
      <el-form-item label="笔记编号:">
        {{ dataForm.id }}
      </el-form-item>
      <el-form-item label="书籍编号:">
        {{ dataForm.bookId }}
      </el-form-item>
      <el-form-item label="书籍名称:">
        {{ dataForm.bookName }}
      </el-form-item>
      <el-form-item label="用户uid:">
        {{ dataForm.userId }}
      </el-form-item>
      <el-form-item label="用户昵称:">
        {{ dataForm.nickName }}
      </el-form-item>
      <el-form-item label="发表时间:">
        {{ dataForm.gmtCreated }}
      </el-form-item>
      <el-form-item label="笔记权限:">
        {{ dataForm.isPublic === 0? '私密': '' }}
        {{ dataForm.isPublic === 1? '公开': '' }}
      </el-form-item>
      <el-form-item label="查重:">
        {{ dataForm.repetitionStatus === 1?'通过':'' }}
        {{ dataForm.repetitionStatus === 2?'不通过':'' }}
      </el-form-item>
      <el-form-item label="机审状态:">
        {{ dataForm.machineReviewState === 1?'通过':'' }}
        {{ dataForm.machineReviewState ===-1?'不通过':'' }}
        {{ dataForm.machineReviewState === 2?'审核失败':'' }}
      </el-form-item>
      <el-form-item label="人工审核状态:">
        {{ dataForm.reviewState === 1?'通过':'' }}
        {{ dataForm.reviewState ===-1?'不通过':'' }}
        {{ dataForm.reviewState === 0?'—':'' }}
      </el-form-item>
      <el-form-item label="人工审核时间:">
        {{ dataForm.reviewTime || '—' }}
      </el-form-item>
      <el-form-item label="笔记内容:">
        <div class="noteContent" v-html="noteHandle(dataForm.noteContent)"></div>
      </el-form-item>
      <el-form-item label="用户点赞数:">
        {{ dataForm.userLikeCount }}
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">返回</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        dataForm: {
          isPublic: 0
        }
      }
    },
    methods: {
      init(id) {
        this.dataForm = { isPublic: 0 }
        this.visible = true
        this.$nextTick(() => {
          this.$http({
            url: this.$http.adornUrl(
              `/course/noterecord/info/${id}`
            ),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm = data.noteRecord
            }
          })
        })
      },
      noteHandle(note) {
        if (note) {
          let noteHtml = ''
          let noteArr = note
          noteArr.map((item) => {
            if (item.type === 'text') {
              noteHtml += item.content + '<br>'
            } else if (item.type === 'image') {
              noteHtml += `<img src="${item.content}" style="width: 100%;margin: 15px 0;">` + '<br>'
            }
          })
          return noteHtml
        }
      },
      // 表单提交
      dataFormSubmit(result) {
        this.dataForm.reviewState = result
        this.$http({
          url: this.$http.adornUrl(
            `/course/noterecord/update`
          ),
          method: 'post',
          data: this.$http.adornData(this.dataForm)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            });
          } else {
            this.$message.error(data.msg)
          }
        })
      }
    }
  }
</script>
<style scoped>
  .noteContent{
    border: 1px solid #898989;
    border-radius: 6px;
    padding: 30px;
    height:400px;
    overflow-y: scroll;
  }
  .noteContent img{
    width: 100%!important;
    height: auto;
  }
</style>
